<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>布局</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/index_middle.css" />
	   <link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<div id="all">
			<div id="header">
				<div class="top_01">
					<div></div>
					<div>
						<div><a href="#" onclick="login()">你好，请登录</a></div>
						<div><a href="#">注册</a></div>
					</div>
					<div></div>
					<div>
						<div><a href="#">购物车(0)</a></div>
						<div><a href="#">我的订单</a></div>
						<div><a href="#">我的睿购</a></div>
						<div><a href="#">关于睿购商城</a></div>
					</div>
					<div></div>
				</div>
				<div class="top_02">
					<div>
						<img src="img/2019-11-11_130233.jpg"  />
					</div>
					<div>
						<div>
							<input type="text" name="search" />
						</div>
						<div>
							<input type="button" value="搜索" />
						</div>
					</div>
				</div>
			</div>
			<div id="middle">
				<div id="middle_top">
					<div>
						<div>
							<span>家用电器</span>
						</div>
						<div>
							<span>手机</span>
							<span class="line">&frasl;</span>
							<span>运营商</span>
							<span class="line">&frasl;</span>
							<span>数码</span>
						</div>
						<div>
							<span>电脑</span>
							<span class="line">&frasl;</span>
							<span>办公配件</span>
						</div>
						<div>
							<span>电脑</span>
							<span class="line">&frasl;</span>
							<span>办公配件</span>
						</div>
						<div>
							<span>电脑</span>
							<span class="line">&frasl;</span>
							<span>办公配件</span>
						</div>
					</div>
					<div>
						<img src="img/banner1.jpg" />
					</div>
				</div>
				<div id="middle_content">
					<div class="content">
						<div>
							<div class="cline"></div>
							<div>家用电器</div>
							<div class="cline"></div>
						</div>
						<div ></div>
						<div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-1.jpg" />
								</div>
							</div>
							<div>
								<div>电视</div>
								<div>
									<img src="img/floor1-2.jpg" />
								</div>
							</div>
							<div>
								<div>洗衣机</div>
								<div>
									<img src="img/floor1-3.jpg" />
								</div>
							</div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-3.jpg" />	
								</div>
							</div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-3.jpg" />	
								</div>
							</div>
						</div>
					</div>
					
					
					<div class="content">
						<div>
							<div class="cline"></div>
							<div>家用电器</div>
							<div class="cline"></div>
						</div>
						<div ></div>
						<div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-1.jpg" />
								</div>
							</div>
							<div>
								<div>电视</div>
								<div>
									<img src="img/floor1-2.jpg" />
								</div>
							</div>
							<div>
								<div>洗衣机</div>
								<div>
									<img src="img/floor1-3.jpg" />
								</div>
							</div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-3.jpg" />	
								</div>
							</div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-3.jpg" />	
								</div>
							</div>
						</div>
					</div>
					
					
					<div class="content">
						<div>
							<div class="cline"></div>
							<div>家用电器</div>
							<div class="cline"></div>
						</div>
						<div ></div>
						<div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-1.jpg" />
								</div>
							</div>
							<div>
								<div>电视</div>
								<div>
									<img src="img/floor1-2.jpg" />
								</div>
							</div>
							<div>
								<div>洗衣机</div>
								<div>
									<img src="img/floor1-3.jpg" />
								</div>
							</div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-3.jpg" />	
								</div>
							</div>
							<div>
								<div>空调</div>
								<div>
									<img src="img/floor1-3.jpg" />	
								</div>
							</div>
						</div>
					</div>
					
					
					
					
				</div>
			</div>
			<div id="footer">
				<div>
					<div>
						<div><img src="img/2019-11-11_多.jpg" /> </div>
						<div>品类齐全，轻松购物</div>
					</div>
					<div>
						<div>
							<img src="img/2019-11-11_快.jpg" /> 
						</div>
						<div>多仓直发，极速配送</div>
					</div>
					<div>
						<div>
							<img src="img/2019-11-11_好.jpg" />
						</div>
						<div>正品行货，精致服务</div>
					</div>
					<div>
						<div><img src="img/2019-11-11_省.jpg" /> </div>
						<div>天天低价，畅选无忧</div>
					</div>
				</div>
				<div>
					Copyright &copy;2019 睿购商城  All Right Reserved 
				
				</div>
			</div>
		</div>
		
	<!--登录的时候，将上面的div的内容覆盖	-->
	<div  id="cover"></div>	
		
	<!--登录的div-->
	<div id="logindiv">
		<div><img src="img/close.svg" onclick="close1()"/> </div>
		<div>
			<div>
				<label><img src="img/username.svg"/></label>
				<input type="text" name="username" placeholder="请输入用户名"/>
			</div>
			<div>
				<label><img src="img/password.svg"/></label>
				<input type="text" name="username"/>
			</div>
			<div>
				<input type="button" value="登录" onclick="close1()"/>
				<input type="button" value="取消" onclick="close1()"/>
			</div>
			 
		</div>
	</div>
	<!--视频-->
	<!--<video autoplay="autoplay" controls="controls" src=""></video>-->
	<!--音频-->
	<!--<audio controls="controls" ></audio>-->
	<script>
		function login(){
			var cover=document.getElementById("cover");
			var logindiv=document.getElementById("logindiv");
			cover.setAttribute("style","display: block;")
			logindiv.setAttribute("style","display: block;")
		}
		
		function close1(){
			var cover=document.getElementById("cover");
			var logindiv=document.getElementById("logindiv");
			cover.setAttribute("style","display: none;")
			logindiv.setAttribute("style","display: none;")
		}
	</script>
	
	</body>
</html>
